<template>
  <div class="m-audio">
    <m-svg
      name="voice"
      :class="{ 'is-playing': state.isPlaying }"
      @click.native="startPlay"
    ></m-svg>
    <audio
      :src="src"
      controls
      ref="audioRef"
      @ended="handleEnded"
      style="display: none"
    >
      <p>浏览器不支持音频标签或浏览器版本过低，请更换或者升级浏览器</p>
    </audio>
  </div>
</template>

<script setup>
import MSvg from '../svg/m-svg.vue'
import { ref, reactive } from 'vue'
const props = defineProps({
  src: String
})

const state = reactive({
  isPlaying: false
})

const audioRef = ref()

function startPlay() {
  if (!state.isPlaying) {
    // 正在播放不处理
    audioRef.value.play()
    state.isPlaying = true
  }
}

function handleEnded() {
  state.isPlaying = false
}
</script>
